<template>
  <el-form
      ref="formRef"
      :model="numberValidateForm"
      label-width="100px"
      class="demo-ruleForm"
      :rules="rules"
  >
    <el-form-item
        label="用户"
        prop="age"
    >
      <el-input
          v-model.number="numberValidateForm.age"
          type="text"
          autocomplete="off"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import {useUserStore} from '@/stores/user'
const store = useUserStore()

const router = useRouter()

const formRef = ref()

const rules = reactive({
  age: [
    {required: true, message: 'age is required'}
  ]
})

const numberValidateForm = reactive({
  age: '',
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      // 示例写法
      store.getTokenStore({
          username: numberValidateForm.age,
          password: numberValidateForm.age
      })
      router.replace('/')
    } else {
      return false
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>